.weather-data-card {
  box-sizing: border-box;
  font-family: 'SourceHanSansSC', 'SourceHanSansSC', '思源黑体', 'SimHei', sans-serif;
  .top-wrap{
    width: 100%;
    height: 708px;
    margin-bottom: 20px;
  }
  .bottom-wrap{
    width: 100%;
    height: 352px;
  }
  .title-wrap{
    width: 100%;
    background-size: 100% 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 15px 0;
    margin-bottom: 3px;
    .title-str{
      display: flex;
      align-items: center;
      position: relative;
      height: 30px;
      overflow: hidden;
      padding-top: 3px;
      .title, .sen-title {
        font-family: YouSheBiaoTiHei;
        font-size: 19px;
        font-weight: bold;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, #0077ef 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        box-sizing: border-box;
        transition: all 0.3s ease;
      }
      .sen-title{
        position: absolute;
        bottom: -16px;
        opacity: 0.2;
        display: inline-block; /* 使 transform 属性有效 */
        transform: scaleY(-1); /* 镜像效果，水平翻转 */
      }
      .title:hover {
        transform: scale(1.02);
      }
      .subtitle {
        font-family: AzonixRegular;
        text-transform: uppercase;
        width: 75%;
        box-sizing: border-box;
        transition: all 0.3s ease;
        font-size: 14px;
        color: rgba(255,255,255,0.5);
        margin-left: 15px;
        letter-spacing: 2px;
        white-space: normal;
        line-height: 14px;
      }
      .subtitle:hover {
        opacity: 0.6 !important;
      }
    }
  }
  .content-wrap {
    height: calc(100% - 62px);
    width: calc(100% - 10px);
    background: linear-gradient(180deg, rgba(20, 25, 31, 0.6) 0%, rgba(60, 66, 73, 0.6) 100%), linear-gradient(178deg, rgba(9, 11, 13, 0) 0%, #26394D 100%), radial-gradient(185% 43% at 53% -3%, rgba(166, 213, 255, 0.5) 0%, rgba(166, 209, 255, 0) 24%, rgba(179, 212, 255, 0) 100%);
    border: 1px solid rgba(77, 89, 102, 0.25);
    border-radius: 4px;
    padding: 10px 15px 0;
    box-sizing: border-box;
    .item-head{
      display: flex;
      align-items: center;
      .head-round{
        width: 17px;
        height: 17px;
        background-size: cover;
        margin-right: 5px;
      }
      .head-title{
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: 500;
        font-size: 16px;
        color: #6FBDFF;
      }
      .head-line{
        flex: 1;
        height: 2px;
        background: linear-gradient( 90deg, rgba(0,139,255,0) 0%, #008BFF 100%);
      }
      .head-right{
        width: 28px;
        height: 24px;
        background-size: cover;
      }
      .plus-icon{
        width: 24px;
        height: 24px;
        background-size: cover;
      }

    }
    .air-area{
      display: flex;
      box-sizing: border-box;
      margin: 12px 0;
      // 左右共用，不要移动层级
      .forecast-time {
        // 字体思源黑体 Medium, 14px, rgba(255,255,255,0.6)
        font-family: SourceHanSansSC, sans-serif;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 0.8px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 10px;
      }
      .left-wrap{
        width: 27%;
        height: 100%;
        .weather-section {
          display: flex;
          align-items: center;
          .weather-icon {
            // 位置 44px 298px, 大小 46px 46px
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 8px;
            margin-top: 3px;
            &:hover {
              transform: scale(1.1);
              filter: brightness(1.2);
            }
            &:active {
              transform: scale(1.05);
            }
          }
          .weather-type {
            // 字体思源黑体 Bold, 20px, #FFFFFF
            font-family: SourceHanSansSC, sans-serif;
            font-weight: bold;
            font-size: 20px;
            line-height: 26px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            // 渐变背景: #FFFFFF -> #81C6FF
            -webkit-background-clip: text;
            background-clip: text;
            transition: all 0.3s ease;
          }
        }
      }
      .right-wrap{
        width: 73%;
        .temperature-section{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .width-90{
            width: 140px;
            .temp-label{
              width: 56px;
              text-align: right;
            }
            .temp-value{
              width: calc(100% - 61px);
            }
          }
          .width-60{
            width: 80px;
          }
          .t-width{
            width: 100px;
          }
          .width-60, .t-width{
            .temp-label{
              width: 30px;
              text-align: right;
            }
            .temp-value{
              width: calc(100% - 35px);
            }
          }
          .section-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
            .temp-label{
              font-size: 14px;
              margin-right: 5px;
            }
            .temp-value {

              // 字体DIN Alternate Bold, 16px, #1AD7FF
              font-family: DINAlternate, sans-serif;
              font-weight: bold;
              font-size: 16px;
              line-height: 18px;
              letter-spacing: 0.4px;
              text-align: center;
              justify-content: space-between;
              font-style: normal;
              // 渐变背景: #FFFFFF -> #81C6FF
              -webkit-background-clip: text;
              background-clip: text;
              transition: all 0.3s ease;
              white-space: nowrap;
              //opacity: 0.65;
              background: linear-gradient( 90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.39) 27%, rgba(52,165,255,0.45) 51%, rgba(52,165,255,0.35) 79%, rgba(0,139,255,0) 100%)!important;
              >span{
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    .chart-wrap{
      width: 100%;
      height: 143px;
      margin-bottom: 15px;
      .title-wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        height: 32px;
        .tab-selector {
          display: flex;
          justify-content: left;
          .tab-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            height: 32px;
            border: 1px solid #3A4E74;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
          }
          .tab-item:first-child{
            border-radius: 4px 0 0 4px;
            border-right: none;
          }
          .tab-item:last-child{
            border-radius: 0 4px 4px 0;
            border-left: none;
          }
        }
        // 操作图标
        .action-icon {
          cursor: pointer;
          transition: all 0.3s ease;
          &:hover {
            transform: translateY(-50%) scale(1.1);
            filter: brightness(1.2);
          }
          &:active {
            transform: translateY(-50%) scale(1.05);
          }
        }
      }
      .chart-area{
        width: 100%;
        height: calc(100% - 40px);
      }
    }
    .hour-area{
      height: 48px;
      margin: 15px 0;
      display: flex;
      justify-content: space-between;
      .hour-item{
        width: 48%;
        border-radius: 4px;
        background: rgba(88, 101, 112, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-left: 5px;
        .hour-icon{
          width: 32px;
          height: 32px;
          background-size: cover;
          margin-right: 5px;
        }
        .hour-middle{
          display: flex;
          flex-direction: column;
          justify-content: start;
          align-items: start;
          .title{
            color: rgba(255,255,255,1);
          }
          .str{
            color: rgba(255,255,255,0.8);
          }
        }
        .hour-value{
          width: 60px;
          font-size: 24px;
          text-align: center;
          font-family: 'DINAlternate';
          font-weight: bold;
          background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }
    }
    .well-area{
      height: 44px;
      display: flex;
      margin-top: 20px;
      justify-content: space-between;
      .well-item{
        width: calc(100% / 3);
        display: flex;
        .well-icon{
          position: relative;
          width: 44px;
          height: 44px;
          .bg{
            position: absolute;
            top: 22px;
            width: 44px;
            height: 44px;
            background-size: 100% 50%;
            background-repeat: no-repeat;

          }
          .icon{
            width: 32px;
            height: 36px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            bottom: 10px;
            left: 6px;
          }
        }
        .well-content{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: rgba(255,255,255,1);
          .value-bg{
            display: flex;
            align-items: end;
            justify-content: center;
            width: 80px;
            margin-bottom: 5px;
            font-family: 'DINAlternate';
            font-weight: bold;
            height: 24px;
            line-height: 24px;
            font-size: 24px;
            background: linear-gradient( 90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.29) 33%, rgba(52,165,255,0.39) 45%, rgba(52,165,255,0.29) 91%, rgba(0,139,255,0) 100%);
            .value{
              display: flex;
              align-items: end;
              justify-content: center;
              background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }
          }
        }

      }
    }
    .bottom-area{
      padding-top: 15px;
      .tab-selector {
        display: flex;
        justify-content: center;
        .tab-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 105px;
          height: 30px;
          border: 1px solid #3A4E74;
          cursor: pointer;
          transition: all 0.3s ease;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }
        .tab-item:first-child{
          border-radius: 4px 0 0 4px;
          border-right: none;
        }
        .tab-item:last-child{
          border-radius: 0 4px 4px 0;
          border-left: none;
        }
      }
      // 统计数据区域
      .stats-area {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        margin-top: 20px;
        .stat-item {
          width: calc(100% / 3);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          .stat-label {
            font-family: SourceHanSansSC, sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            text-align: center;
            font-style: normal;
            margin-bottom: 8px;
          }

          .stat-value-container {
            display: flex;
            align-items: baseline;
            justify-content: center;
            height: 28px;
            .stat-value {
              font-size: 24px;
              line-height: 28px;
              letter-spacing: 0.86px;
              text-align: left;
              font-style: normal;
              transition: all 0.3s ease;
              font-family: 'DINAlternate';
              font-weight: bold;
              background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }

            .stat-unit {
              // SourceHanSansSC Normal, 16px, #FFFFFF, 行高22px, 居中对齐
              font-family: SourceHanSansSC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              line-height: 22px;
              text-align: center;
              font-style: normal;
              margin-left: 4px;
              align-self: flex-end;
              margin-bottom: 3px; // 对齐调整
            }
          }
        }
      }

      // 表格区域
      .table-area {
        width: 100%;
        padding: 20px 20px 0;
        box-sizing: border-box;
        // 表头
        .table-header {
          width: 100%;
          display: flex;
          align-items: center;
          height: 40px;
          .header-cell {
            width: calc(100% / 3);
            // 字体思源黑体 Medium, 16px, #56A5FF, 行高16px, 居中对齐
            font-family: SourceHanSansSC, sans-serif;
            font-weight: 500;
            font-size: 16px;
            line-height: 16px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
        // 表格主体
        .table-body {
          width: 100%;
          height: 90px;
          overflow-y: auto;
          .table-row:nth-child(2n){
            background: rgba(16,85,163,0.18);
          }
          .table-row {
            display: flex;
            align-items: center;
            // Frame 26备份 17: 460px 40px, rgba(16,85,163,0.18)
            width: 100%;
            height: 40px;
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover {
              background: rgba(16, 85, 163, 0.35) !important;
              transform: translateX(2px);

              .table-cell {
                color: #FFFFFF !important;
                filter: brightness(1.1);
              }
            }

            &:active {
              transform: translateX(0);
            }

            .table-cell {
              width: calc(100% / 3);
              // 字体思源黑体 Medium, 16px, #56A5FF, 行高16px, 居中对齐
              font-family: SourceHanSansSC, sans-serif;
              font-weight: 500;
              font-size: 14px;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
  }
  .isActive{
    color: rgba(255,255,255,1);
    border: 1px solid #43c3f5 !important;
    background: linear-gradient(to bottom, rgba(67,195,245, 0) 35%, rgba(67,195,245, 1));
  }
  .unActive{
    border: 1px solid #3A4E74 !important;
    background: rgba(5, 18, 34, 0.20);
    color: rgba(255,255,255,0.9);
  }
  .bottom-line{
    border: 2px solid;
    border-image: linear-gradient(225deg, rgba(117, 170, 202, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(117, 170, 202, 0)) 2 2;
  }
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }

  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
}
